{extend name="layout/detail" /}
{block name="content"}
<div class="space-10"></div>
<div class="td-content-wrap p20">
    <div class="td-content-header">
        <h1>角色管理</h1>
        <div class="simple_search">
            <form id="form_search" class="layui-form" method="post">
                <div class="layui-input-inline w22">
                    <input class="layui-input" name="li_name" placeholder="请输入角色名称查询">
                    <a class="add-on" onclick="form_search()"><i class="fa fa-search"></i></a>
                </div>
            </form>
        </div>
    </div>
    <hr>
    <div class="panel no-border">
        <span class="mid"></span>
        <a class="layui-btn" onclick="add();">新增角色</a>
        <a class="layui-btn" onclick="menu();">角色权限管理</a>
        <a class="layui-btn" onclick="user();">角色分配</a>
    </div>
    <table id="data_table" lay-filter="data_table"></table>
</div>
{/block}

{block name="script"}
<script type="text/html" id="tool_bar">
    <a class="layui-btn layui-btn-xs hidden" lay-event="read">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="del">删除</a>
</script>
<script>
    layui.use(['element', 'table'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var where = {};

        // 记录返回地址
        set_return_url(null);

        // 页面用到方法
        var fn = {
            menu: function () {
                window.open('{:url("menu")}', '_self');
            },
            user: function () {
                window.open('{:url("user")}', '_self');
            },
            form_search: function () {
                where = serialize_form('#form_search');
                tableIns.reload({
                    where: where
                });
            },
            add: function (data) {
                popup_open('{:url("add")}', 720, 513);
            },
            read: function (data) {
                popup_open('{:url("read")}?id=' + data.id, 720, 513);
            },
            edit: function (data) {
                popup_open('{:url("edit")}?id=' + data.id, 720, 513);
            },
            set_valid: function (data) {
                var vars = "id=" + data.id;
                $.get("{:url('set_valid')}", vars, function (res) {
                    if (res.code) {
                        layer.msg(res.msg, {
                            time: 1200
                        }, function () {
                            location.reload(true);
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                });
            },
            set_invalid: function (data) {
                var vars = "id=" + data.id;
                $.get("{:url('set_invalid')}", vars, function (res) {
                    if (res.code) {
                        layer.msg(res.msg, {
                            time: 1200
                        }, function () {
                            location.reload(true);
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                });
            },
            sort_up: function (data) {
                var vars = "id=" + data.id;
                $.get("{:url('sort_up')}", vars, function (res) {
                    if (res.code) {
                        layer.msg(res.msg, {
                            time: 1200
                        }, function () {
                            location.reload(true);
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                });
            },
            sort_down: function (data) {
                var vars = "id=" + data.id;
                $.get("{:url('sort_down')}", vars, function (res) {
                    if (res.code) {
                        layer.msg(res.msg, {
                            time: 1200
                        }, function () {
                            location.reload(true);
                        });
                    } else {
                        layer.msg(res.msg);
                    }
                });
            },
            del: function (data) {
                layer.msg('确定要删除吗?', {
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        var vars = 'id=' + data.id;
                        $.get("{:url('del')}", vars, function (res) {
                            if (res.code) {
                                layer.msg(res.msg, {
                                    time: 1200
                                }, function () {
                                    location.reload(true);
                                });
                            } else {
                                layer.msg(res.msg, {time: 1200});
                            }
                        });
                    },
                    no: function (index) {
                        layer.close(index);
                    }
                });
            },
        };
        win_exp(fn);

        var page_config = {
            limits: [10, 20, 50, 100, 1000],
            layout: ['prev', 'page', 'next', 'skip', 'limit', 'count'],
        };

        var response = {
            statusCode: 1 //规定成功的状态码，默认：0
        };
        var cols = [[
            {
                field: 'name',
                title: '角色',
            },
            {
                toolbar: '#tool_bar',
                title: '操作',
                width: 160,
                fixed: 'right',
            }]];

        var tableIns = table.render({
            loading: false,
            elem: '#data_table',
            url: '{:url()}',
            page: page_config,
            response: response,
            cols: cols,
            where: where,
            done: function (res, curr, count) {
                $(this.elem.selector).next().find('table tbody td[data-field=background_color]').each(function () {
                    index = $(this).closest('tr').attr('data-index');
                    background_color = $(this).text();
                    $("table tbody tr[data-index=" + index + "]").addClass(background_color);
                });
            }
        });

        table.on('tool(data_table)', function (obj) {
            var data = obj.data;
            //获得当前行数据
            var layEvent = obj.event;
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr;
            //获得当前行 tr 的DOM对象

            fn[layEvent](data);
        });

        form.on('select(is_valid)', function (data) {
            adv_search();
        });

        form.on('select(dept_id)', function (data) {
            adv_search();
        });
    });
</script>
{/block}